<template>
  <a-card>
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="12">
          <a-col :md="7" :sm="8">
            <a-form-item label="名称" :labelCol="{ span: 6 }" :wrapperCol="{ span: 14, offset: 1 }">
              <a-input placeholder="请输入" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <a-form-item label="属性键" :labelCol="{ span: 6 }" :wrapperCol="{ span: 14, offset: 1 }">
              <a-input placeholder="请输入" v-model="queryParam.attrCode"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="default" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a-button @click="handleAdd" type="primary" icon="plus" style="margin-left: 8px">添加</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table ref="table" rowKey="id" size="middle" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" @change="handleTableChange">
      <span slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">
          <a-icon type="edit" />
          编辑
        </a>
        <a-divider type="vertical" />
        <a @click="editDictItem(record)"><a-icon type="setting" /> 字典配置</a>
        <a-divider type="vertical" />
        <a-button type="link" disabled style="padding:0">删除</a-button>
        <!-- <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
          <a>删除</a>
        </a-popconfirm> -->
      </span>
    </a-table>
    <!-- 字典类型 -->
    <dict-modal ref="modalForm" @ok="modalFormOk"></dict-modal>
    <dict-item-list ref="dictItemList"></dict-item-list>
    <!-- table  columns-->
    <!-- <columns-modal ref="columnsModal"></columns-modal> -->
  </a-card>
</template>
<script>
import DictModal from './components/DictModal'
import DictItemList from './components/DictItemList'
// import ColumnsModal from './components/ColumnsModal'
import { attrList } from '@/api/box/setting'
let columns = [
  {
    title: '#',
    dataIndex: '',
    key: 'rowIndex',
    width: 120,
    align: 'center',
    customRender: function(t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '名称',
    align: 'left',
    dataIndex: 'name'
  },
  {
    title: '属性键',
    align: 'left',
    dataIndex: 'attrCode'
  },
  {
    title: '属性值',
    align: 'left',
    dataIndex: 'code'
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: { DictModal, DictItemList },
  data() {
    return {
      columns,
      /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
      queryParam: {},
      /* 数据源 */
      dataSource: [],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return `共有 ${total} 条数据`
        },
        showSizeChanger: true,
        total: 0
      },
      /* table加载状态 */
      loading: false
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData(arg) {
      this.loading = true
      if (arg === 1) {
        this.ipagination.current = 1
      }
      let formValue = JSON.parse(JSON.stringify(this.queryParam))
      for (let key in formValue) {
        if (formValue[key] == null || formValue[key] == undefined || formValue[key] === '') {
          delete formValue[key]
        }
      }
      let params = {
        page: {
          pageNo: this.ipagination.current,
          pageSize: this.ipagination.pageSize
        },
        requestData: formValue
      }
      attrList(params).then(res => {
        if (res.code == 0) {
          this.dataSource = res.data
          if (res.page.count) {
            this.ipagination.total = res.page.count
          } else {
            this.ipagination.total = 0
          }
        } else {
          this.$message.warning(res.msg)
        }
        this.loading = false
      })
    },

    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      console.log(pagination)
      /* if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      } */
      this.ipagination = pagination
      this.loadData()
    },
    handleEdit: function(record) {
      console.log(record)
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = '编辑'
      this.$refs.modalForm.disableSubmit = false
    },
    handleAdd: function() {
      this.$refs.modalForm.add()
      this.$refs.modalForm.title = '新增'
      this.$refs.modalForm.disableSubmit = false
    },
    //编辑字典数据
    editDictItem(record) {
      this.$refs.dictItemList.edit(record)
    },
    searchQuery() {
      this.loadData(1)
    },
    searchReset() {
      this.queryParam = {}
      this.loadData(1)
    },
    modalFormOk() {
      // 新增/修改 成功时，重载列表
      this.loadData()
      //清空列表选中
      // this.onClearSelected()
    }
  }
}
</script>

